import React, {useRef, useState} from "react";
import {ActionType, ModalForm, PageContainer, ProFormText, ProFormTextArea, ProTable} from "@ant-design/pro-components";
import {addOrUpdateCustomerLevel, getAllCustomerLevels} from "@/services/customer/customer";
import {Button, message, Spin} from "antd";
import moment from "moment";

const CustomerLevel = () => {
  const [loading, setLoading] = useState(false);

  const actionRef = useRef<ActionType>();
  const formRef = useRef();
  const descFormRef = useRef();

  const [editModal, setEditModal] = useState(false)
  const [descModal, setDescModal] = useState(false)
  const [isEdit, setIsEdit] = useState(false)
  const [record, setRecord] = useState(null)

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
    }, {
      title: '级别名称',
      dataIndex: 'levelName',
    }, {
      title: '创建时间',
      dataIndex: 'createdTime',
      render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a key="editable" onClick={() => {
          setEditModal(true)
          setIsEdit(true)
          setRecord(record)
        }}>
          编辑
        </a>,
        <a key="descEditable" onClick={() => {
          setRecord(record)
          setDescModal(true)

        }}>
          级别说明
        </a>,
      ],
    },
  ]

  const getAllCustomerLevel = async () => {
    const msg = await getAllCustomerLevels();
    console.log('all customer level', msg.data)
    return msg.data;
  }

  return (
    <PageContainer header={{title: '客户级别配置'}}>
      <Spin spinning={loading} tip="加载中...">
      <ProTable
        actionRef={actionRef}
        search={false}
        columns={columns}
        request={async () => {
          const data = await getAllCustomerLevel();
          return {
            data: data,
            success: true,
            total: 1
          }
        }}
        toolBarRender={() => [
          <Button
            key="button"
            onClick={() => {
              setEditModal(true)
              setIsEdit(false)
              setRecord(null)
            }}
            type="primary"
          >
            新建级别
          </Button>,
        ]}
        pagination={false}
      />
      <ModalForm
        formRef={formRef}
        title={isEdit ? '编辑级别' : '新建级别'}
        layout={'inline'}
        open={editModal}
        onOpenChange={(open) => {
          setEditModal(open)
          formRef.current?.setFieldsValue({
            name: isEdit ? record.levelName : '',
          });
        }}
        onFinish={async (values) => {
          const res = await addOrUpdateCustomerLevel({
            id: record ? record.id : null,
            levelName: values.name,
            description: record ? record.description : null,
          })
          if (res.code === 1) {
            setEditModal(false)
            actionRef.current?.reload()
            message.success('操作成功')
            return true
          } else {
            message.error('操作失败')
            return false
          }
        }}
      >
        <ProFormText
          width="md"
          name="name"
          label="级别名称"
          placeholder="请输入级别名称"
          rules={[
            {
              required: true,
              message: '请输入级别名称',
            }, {
              max: 6,
              message: '最多6个字'
            }
          ]}
        />
      </ModalForm>
      <ModalForm
        formRef={descFormRef}
        title="级别说明"
        open={descModal}
        onOpenChange={(open) => {
          setDescModal(open)
          descFormRef.current?.setFieldsValue({
            description: record.description,
          });
        }}
        onFinish={async (values) => {
          const res = await addOrUpdateCustomerLevel({
            id: record ? record.id : null,
            levelName: record ? record.levelName : null,
            description: values.description,
          })
          if (res.code === 1) {
            setDescModal(false)
            actionRef.current?.reload()
            message.success('操作成功')
            return true
          } else {
            message.error('操作失败')
            return false
          }
        }}
      >
        <ProFormTextArea name="description" label='级别说明' placeholder='请输入级别说明'/>
      </ModalForm>
      </Spin>
    </PageContainer>
  )
}

export default CustomerLevel
